<template>
  <el-container class="relativeContainer">
    <el-header>
      <h1>请设置模板维度与查询结果字段关系</h1>
    </el-header>

    <el-main style="height:100%;display:flex;flex-direction:column">
      <el-table :data="dimensions" style="height:100%">
        <el-table-column label="模板维度">
          <template slot-scope="pros">
            <span>{{pros.row.desc}}:{{pros.row.name}}</span>
            &nbsp;&nbsp;
            <el-button
              v-if="pros.row.repeatable == true"
              circle
              size="mini"
              type="primary"
              icon="el-icon-circle-plus"
              @click="insertRepeatable(pros.$index)"
            ></el-button>
          </template>
        </el-table-column>

        <el-table-column label="字段">
          <el-select slot-scope="pros" v-model="selectedFields[pros.$index]" clearable>
            <template v-for="item in  query.queryResultConfig">
              <el-option
                :key="item.columnId"
                :value="item.columnId"
                :label="item.columnDesc"
                v-if="selectable(item.columnId)"
              ></el-option>
            </template>
          </el-select>
        </el-table-column>

        <el-table-column label="操作">
          <el-button
            slot-scope="pros"
            v-if="pros.row.repeatable == true && pros.row.deteable == true"
            circle
            size="mini"
            type="primary"
            icon="el-icon-delete"
            @click="deleteRepeatable(pros.$index)"
          ></el-button>
        </el-table-column>
      </el-table>

      <el-row type="flex" justify="end">
        <el-button type="primary" @click="nextStep">
          完成
          <i class="el-icon-arrow-right el-icon--right"></i>
        </el-button>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
export default {
  props: ["selectedTemplate", "selectedQuery", "reportInfo"],

  data() {
    return {
      template: "",
      query: { queryResultConfig: [] },

      dimensions: [],

      selectedFields: []
    };
  },

  mounted() {
    this.loadData();
  },

  methods: {
    nextStep() {
      if (
        this.selectedQuery != "" ||
        this.selectedTemplate != "" ||
        this.reportInfo.reportName != ""
      ) {
        let reportRelations = [];

        for (let index in this.selectedFields) {
          let relation = {
            relationDimension: this.dimensions[index].name,
            relationColumn: this.selectedFields[index]
          };

          reportRelations.push(relation);
        }

        let payload = {
          reportName: this.reportInfo.reportName,
          reportDesc: this.reportInfo.reportDesc,
          reportQuery: this.selectedQuery,
          reportTemplate: this.selectedTemplate,
          reportRelations: reportRelations
        };

        this.$axios
          .post("/report/addReport", payload)
          .then(d => {
            this.$notify({
              title: "成功",
              message: "添加成功",
              type: "success"
            });

            this.$router.replace("/reportList");
          })
          .catch(e => {});
      } else {
        this.$notify.error({
          title: "错误",
          message: "前置数据不能为空"
        });
      }
    },

    deleteRepeatable(index) {
      this.dimensions.splice(index, 1);
    },
    insertRepeatable(index) {
      let item = Object.assign({}, this.dimensions[index]);
      item.deteable = true;
      this.dimensions.push(item);
    },

    selectable(columnId) {
      if (this.selectedFields.indexOf(columnId) > -1) {
        return false;
      }

      return true;
    },
    loadData() {
      this.$axios
        .get("/template/getTemplate?templateName=" + this.selectedTemplate)
        .then(d => {
          this.template = d.data;
          this.dimensions = d.data.dataDimensions;
        })
        .catch(e => {
          this.$notify.error({
            title: "错误",
            message: "加载模板信息失败"
          });
        });

      this.$axios
        .get("/query/getQuery?queryId=" + this.selectedQuery)
        .then(d => {
          this.query = d.data;
        })
        .catch(e => {
          this.$notify.error({
            title: "错误",
            message: "加载查询信息失败"
          });
        });
    }
  }
};
</script>

<style>
.relativeContainer {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}
</style>
